<template>
  <el-card class="content-card">
    <template #header>
      <div class="card-header">
        <h3>待办事项</h3>
      </div>
    </template>
    <div class="pending-list">
      <div v-for="(item, index) in pendingStats" :key="index" class="pending-item">
        <el-tag :type="getPriorityType(item.priority)" class="priority-tag">
          {{ getPriorityText(item.priority) }}
        </el-tag>
        <span class="pending-name">{{ item.name }}</span>
        <span class="pending-count">{{ item.count }}</span>
      </div>
      <div v-if="pendingStats.length === 0" class="no-data">暂无待办事项</div>
    </div>
  </el-card>
</template>

<script setup lang="ts">
  interface PendingItem {
    name: string
    count: number
    priority: 'high' | 'medium' | 'low' | string
  }

  interface Props {
    pendingStats: PendingItem[]
  }

  const props = defineProps<Props>()

  // 获取优先级标签类型
  const getPriorityType = (priority: string) => {
    const priorityMap: Record<string, string> = {
      high: 'danger',
      medium: 'warning',
      low: 'info',
    }
    return priorityMap[priority] || 'default'
  }

  // 获取优先级文本
  const getPriorityText = (priority: string) => {
    const priorityMap: Record<string, string> = {
      high: '高',
      medium: '中',
      low: '低',
    }
    return priorityMap[priority] || '普通'
  }
</script>

<style scoped lang="scss">
  .content-card {
    margin-bottom: 20px;
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .card-header h3 {
    margin: 0;
    font-size: 16px;
    color: #303133;
  }

  .pending-list {
    padding: 8px 0;
  }

  .pending-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    margin-bottom: 8px;
    background-color: #f5f7fa;
    border-radius: 8px;
  }

  .priority-tag {
    margin-right: 12px;
  }

  .pending-name {
    flex: 1;
    font-size: 14px;
    color: #303133;
  }

  .pending-count {
    font-size: 14px;
    font-weight: bold;
    color: #409eff;
  }

  .no-data {
    text-align: center;
    padding: 20px 0;
    color: #909399;
    font-size: 14px;
  }
</style>
